<template>
  <a-form ref="dataSourceFormRef" :model="dataSourceModel" :rules="dataSourceFormRule">
    <a-row>
      <a-col :span="11">
        <a-form-item :label-col="{ span: 6 }" name="dataSourceCode" :label="t('org.data-source.dataSourceCode')">
          <a-input
            v-model:value="dataSourceModel.dataSourceCode"
            :placeholder="t('org.data-source.formPlhDataSourceCode')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item :label-col="{ span: 6 }" name="dataSourceName" :label="t('org.data-source.dataSourceName')">
          <a-input
            v-model:value="dataSourceModel.dataSourceName"
            :placeholder="t('org.data-source.formPlhDataSourceName')"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="22">
        <a-form-item :label-col="{ span: 3 }" name="dataSourceDesc" :label="t('org.data-source.dataSourceDesc')">
          <a-textarea
            v-model:value="dataSourceModel.dataSourceDesc"
            :placeholder="t('org.data-source.formPlhDataSourceDesc')"
            :rows="4"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="11">
        <a-form-item name="dataSourceType" :label-col="{ span: 6 }" :label="t('org.data-source.dataSourceType')">
          <qc-dictionary-select
            codeItemId="ORG_DATASOURCE_TYPE"
            :placeholder="t('org.data-source.formPlhDataSourceType')"
            v-model:value="dataSourceModel.dataSourceType"
          ></qc-dictionary-select>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="22">
        <a-form-item name="connUrl" :label-col="{ span: 3 }" :label="t('org.data-source.connUrl')">
          <a-input v-model:value="dataSourceModel.connUrl" :placeholder="t('org.data-source.formPlhConnUrl')" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="11">
        <a-form-item name="userName" :label-col="{ span: 6 }" :label="t('org.data-source.userName')">
          <a-input v-model:value="dataSourceModel.userName" :placeholder="t('org.data-source.formPlhUserName')" />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item name="userPassword" :label-col="{ span: 6 }" :label="t('org.data-source.userPassword')">
          <a-input-password
            v-model:value="dataSourceModel.userPassword"
            :placeholder="t('org.data-source.formPlhUserPassword')"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="11">
        <a-form-item name="sqlTemplatePath" :label-col="{ span: 6 }" :label="t('org.data-source.sqlTemplatePath')">
          <a-input
            v-model:value="dataSourceModel.sqlTemplatePath"
            :placeholder="t('org.data-source.formPlhSqlTemplatePath')"
          />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item name="status" :label-col="{ span: 6 }" :label="t('org.data-source.status')">
          <a-checkbox v-model:checked="dataSourceModel.status"></a-checkbox>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
import dataSourceApi from '/@/api/org/data-source'
import { dataSourceFormRule, dataSourceEditUrl } from '../interface'
import { useModelForm } from '/@/kit/model-kit'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  props: {
    dataSourceId: String,
  },
  setup(props, { emit }) {
    const { t } = useI18n()
    const dataSourceFormRef = ref()
    const dataSourceModel = ref({})

    const { save } = useModelForm(dataSourceFormRef, dataSourceModel, props.dataSourceId, dataSourceApi, {
      editPageUrl: dataSourceEditUrl,
    })
    //提交方法
    const onSubmit = () => save().then((res) => emit('submitSuccess', res.data.data))
    return {
      t,
      dataSourceFormRef,
      dataSourceModel,
      dataSourceFormRule,
      onSubmit,
    }
  },
})
</script>